<template>
  <div>
    <!-- 查询按钮组 -->
    <el-row class="wc">
      <span>
        <el-button type="primary" @click="addStory()" round>
          增加新日记
        </el-button>
      </span>
      <span>
        <el-input
          placeholder="请输入查询的id号或者事件,若不填则显示全部"
          v-model="input"
          class="srk"
        >
        </el-input>
      </span>
      <span>
        <el-button class="el" icon="el-icon-search" @click="selectOne()" circle>
        </el-button>
      </span>
    </el-row>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      ref="btnTable"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID号" width="50" align="center">
      </el-table-column>
      <el-table-column
        prop="storyTitle"
        label="标题"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="humorTitle"
        label="幽默标题"
        width="100"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="storySite"
        label="发生地点"
        width="100"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="storyDate"
        label="发生时间"
        width="120"
        align="center"
      >
      </el-table-column>
      <!-- 照片 -->
      <el-table-column prop="storyImg1" label="图片" width="100" align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <!-- 触摸大图 -->
            <img
              :src="scope.row.storyImg1"
              style="width: 250px; height: 250px"
            />
            <!-- 预览小图 -->
            <img
              slot="reference"
              :src="scope.row.storyImg1"
              style="width: 50px; height: 50px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="storyFirst" label="故事内容" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="views" label="浏览次数" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="focus"
        label="是否为重点"
        width="100"
        align="center"
      >
      </el-table-column>
      <!-- 编辑组 -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)">
            查看详情
          </el-button>
          <!-- 分割线 -->
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="Delete(scope.$index, scope.row)"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pageH">
      <el-pagination
        :page-size="page.perPage"
        :pager-count="page.btnPage"
        layout="prev, pager, next"
        :total="page.maxPage"
        @current-change="pageNow"
      >
      </el-pagination>
    </div>
    <!-- 成功提示框 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="20%"
      @close="refr"
      append-to-body
    >
      <div class="dialogSuc">
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="successVisible"
        ></el-button>
        <h2>删除成功</h2>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    const _this = this;
    return {
      input: "",//查询变量
      page: {
        maxPage: 100, //表记录总数
        perPage: 7, //每页显示几个
        btnPage: 7, //总共显示几个按钮组(必须是奇数5<21)
      },
      tableData: [],
      successVisible: false,//成功提示变量
      loading: true,
    };
  },
  created() {
    const _this = this;
    console.log("网页刷新前");
    //打开页面向后端请求显示全部数据
    this.axios({
      method: "get",
      // 公共变量baseUrl() 已经定义在main.js.用于修改后端端口
      url: _this.baseUrl + "/index/get/indexMyStory/pageAll",
    }).then(function (resp) {
      console.log("获取页数成功", resp.data);
      _this.page.maxPage = parseInt(resp.data);
      //打开页面向后端请求显示全部数据(第一页)
      _this.pageNow(1);
    });
  },
  methods: {
    // 换页
    pageNow(size) {
      let _this = this;
      console.log(size + "当前页数");
      //打开页面向后端请求显示全部数据
      _this
        .axios({
          method: "get",
          // 公共变量baseUrl() 已经定义在main.js.用于修改后端端口
          url: _this.baseUrl + "/index/get/indexMyStory?pageNow=" + size,
        })
        .then(function (resp) {
          console.log("获取第" + size + "页数据成功");
          console.log(resp.data);
          _this.tableData = resp.data;
          // 对日期直接选取
          for (let i = 0; i < _this.tableData.length; i++) {
            let date = _this.tableData[i].storyDate + ""; //转换成字符型
            _this.tableData[i].storyDate = date.substr(0, 10);
            _this.tableData[i].storyImg1 =
              _this.imgUrl +resp.data[i].storyImg1; //图片
          }
          _this.loading = false;
          // 渲染之后更新表格排序
          _this.$nextTick(() => {
            _this.$refs.btnTable.doLayout();
          });
        });
    },
    // 按照ID号修改信息 index是显示行号,row是显示行的对象全部内容
    handleEdit(index, row) {
      console.log(index, row.id);
      this.$router.push({ name: "storyDetail", params: { Id: row.id } });
    },
    // 按照ID号删除 index是显示行号,row是显示行的对象全部内容
    Delete(index, row) {
      console.log(index, row.id);
      const _this = this;
      this.axios({
        method: "get",
        // 公共变量baseUrl已经定义在main.js.用于修改后端端口
        url: _this.baseUrl + "/index/get/deleteStory/" + row.id,
      }).then(function (resp) {
        console.log(resp.data);
        _this.successVisible = true;
      });
    },
    //跳转添加页面
    addStory() {
      this.$router.push("/main/storyAdd");
    },
    //刷新页面 (删除成功后,给与提示信息,提示动画结束后调用)
    refr() {
      location.reload();
    },
    // 单个查询
    selectOne() {
      console.log(this.input);
      this.loading = true;
      const _this = this;
      if (this.input == "") {
        _this.pageNow(1);
      } else {
        this.axios({
          method: "get",
          // 公共变量baseUrl已经定义在main.js.用于修改后端端口
          url: _this.baseUrl + "/queryStory/" + _this.input,
        }).then(function (resp) {
          console.log(resp.data);
          _this.tableData = resp.data; //el-table数据的前后交互 必须保证前后端pojo类名字一样
          for (let i = 0; i < _this.tableData.length; i++) {
            let date = _this.tableData[i].storyDate + ""; //转换成字符型
            _this.tableData[i].storyDate = date.substr(0, 10);
            _this.tableData[i].storyImg1 =
              _this.imgUrl + resp.data[i].storyImg1; //图片
          }
          _this.loading = false;
        });
        this.input = "";
      }
    },
  },
};
</script>

<style lang="less">
.wc {
  span {
    width: 30%;
    float: left;
  }
  span:first-child {
    width: 11%;
  }
  span:last-child {
    margin-left: 1%;
  }
}
.pageH {
  position: absolute;
  bottom: 5%;
  width: 30%;
  left: 30%;
}
.dialogSuc {
  display: block;
  margin: 0 auto;
  width: 50%;
  button {
    display: block;
    margin: 0 auto;
  }
  h2 {
    color: green;
    text-align: center;
  }
}
</style>